//--2023.05.22 21:55 星期一 晴

//這個 要寫
// --1. 一些定義的變量
// --2. 解析數據函數
// --3. 創建對應的 dom 數據
// --4. 安裝到相應位置 并記錄對應信息

// -- queue -- 队列

// R_ -- root 底層屬性
// let R_
// let element

/**
 * @param {Object} menuData -- 菜單數據表 exmple:
 * {
	queue: ["a"],
	a: {
		tag: 'details', //-- tag 標簽屬性類型 可以進行自定義
		queue: ["summary", "a_a"], //-- data 屬性一般順序 filter 可以進行干預
		summary: {
			tag: "summary",
			props: ["innerHTML"],
			innerHTML: '飛'
		},
		a_a: {
			tag: 'li',
			props: ["innerHTML", "classlist"],
			innerHTML: '帶你飛',
			classlist: ["neew", "some"]
		}
	}
 */
//用于解析 dom 结构 根据特定关键字 组装 dom 元素
function domTree(append, domData, boolean, childNode) {
  //dom 序列 queue --按照此序列 进行 dom 次序生成
  //按照 层级 次序 进行 组装 dom

  //dom 标签 tag -- 生成的 dom 元素类型
  //dom 属性 props -- 一般 按照 el[props[i]]=node[props[i]]
  return queueDom(append, domData, boolean, childNode);

  /**
   * @param {Object} nod	-- 当前 组装根节点
   * @param {Object} info	-- 当前 节点信息
   * 次序 dom 节点 并 组装到 当前 nod 节点上
   */
  function queueDom(nod, info, boolean, childNode) {
    if (info == undefined || info['queue'] == undefined) {
      return undefined;
    }
    for (let i of info['queue']) {
      // console.log("進入節點循環");
      let currentDom = growthDom(info[i]);
      if (nod == undefined) {
        nod = currentDom;
      } else {
        if (boolean != undefined) {
          if (boolean == true) {
            nod.insertBefore(currentDom, childNode);
          } else {
            if (childNode.nextelementsibling != null) {
              nod.insertBefore(currentDom, childNode.nextelementsibling);
            } else {
              nod.appendChild(currentDom, childNode);
            }
          }
        } else {
          //裝載 當前 匹配好的節點
          nod.appendChild(currentDom);
        }
      }

      //如果 此時 當前節點 有子節點
      if (info[i]['queue'] != undefined) {
        // console.log("進入子節點循環");
        queueDom(currentDom, info[i]);
      }
    }
    return nod;
  }

  /**
   * @param {Object} info	-- 当前 节点信息
   * 生成 dom 元素 并 赋值 其相关属性
   */
  function growthDom(info) {
    let el;
    if (info['tag'] != undefined) {
      // createElement -- 依据 tag 创建 element
      el = document.createElement(info['tag']);
    }
    if (info['props'] != undefined && typeof el.nodeName === 'string') {
      //装填属性
      for (let k of info['props']) {
        // console.log(el, k, info[k]);
        //添加 class
        if (['classList', 'class', 'classlist'].indexOf(k) > -1) {
          el.classList.add(...info[k]);
        }
        // else if(["id"].indexOf(k)>-1){
        // 	el.id=info[k]
        // }
        else {
          el[k] = info[k];
        }
      }
    }
    if (info['attribute'] != undefined && typeof el.nodeName === 'string') {
      for (let k of info['attribute']) {
        el.setAttribute(k, info[k]);
      }
    }
    if (info['events'] != undefined && typeof el.nodeName === 'string') {
      for (let k of info['events']) {
        el.addEventListener(k, info[k]);
      }
    }
    return el;
  }
}

//******************************
let nodeinfo = {
  queue: ['a'],
  a: {
    tag: 'details', //-- tag 標簽屬性類型 可以進行自定義
    queue: ['summary', 'a_a'], //-- data 屬性一般順序 filter 可以進行干預
    summary: {
      tag: 'summary',
      props: ['innerHTML'],
      innerHTML: '飛',
    },
    a_a: {
      tag: 'li',
      props: ['innerHTML', 'classlist'],
      innerHTML: '帶你飛',
      classlist: ['neew', 'some'],
    },
  },
};
// element = domTree(document.querySelector("content_info"), nodeinfo)
// console.log(element);
// document.querySelector("body").appendChild(element)

// function agc(e){
// 	console.log(e,666);
// }

// let el =document.getElementById("selected_area")
// el.addEventListener("click",agc)
// 				console.dir(el);
//
export { nodeinfo, domTree };
